<template>
  <div class='avatar-group-wrapper'>
    <ul class='avatar-group-list'>
      <li class='avatar-group-item' v-for='(avatar, index) of (avatars)' :key='"avatar" + index'>
        <img class='avatar-img' :src="avatar">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'avatarGroup',
  data () {
    return {}
  },
  props: {
    avatars: {
      type: Array,
      default () {
        return [
          'http://static.oss.yuemia.com/202006181022390255.jpeg',
          'http://static.oss.yuemia.com/dhuqwhuihiu.jpg',
          'http://static.oss.yuemia.com/timg.jpg'
        ]
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.avatar-group-wrapper
  display inline-block
  vertical-align middle
  .avatar-group-list
    display flex
    .avatar-group-item
      width 20px
      height 20px
      border 2px solid #ffffff
      border-radius 50%
      overflow hidden
      position relative
      &:nth-child(2)
        margin-left -5px
        z-index 1
      &:nth-child(3)
        margin-left -5px
        z-index 1
      .avatar-img
        display block
        width 100%
        height 100%
</style>
